<template>
    <FloatingBubble>
        <div class="home-box" :class="{ all: show }" @click="toHome">
            <img src="@/assets/img/backhome.png" />
            <span class="text">首页</span>
        </div>
    </FloatingBubble>
</template>

<script lang="ts"  setup>
import FloatingBubble from '@/components/FloatingBubble/Index.vue';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';


const show = ref(true);
let timer: object | void;
const handleShow = () => {
    show.value = false;
    timer = clearTimeout(timer as unknown as number);
    timer = setTimeout(() => {
        show.value = true;
    }, 2000);
};

onMounted(() => {
    document.getElementById('app')?.addEventListener('click', handleShow,true);
    document.getElementById('app')?.addEventListener('touchstart', handleShow,true);
    document.getElementById('app')?.addEventListener('touchmove', handleShow,true);
    document.getElementById('app')?.addEventListener('scroll', handleShow,true);
});

const router = useRouter();
const toHome = async () => {
    await router.push('/home');
};
</script>

<style lang="scss" scoped>
.home-box {
    height: 30px;
    width: auto;
    padding: 7px 8px;
    background: #ffffff;
    border: 0.5px solid #eeeeee;
    box-shadow: 0 2px 3px 0 #00000014;
    display: flex;
    align-items: center;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    transition: all 0.5s linear;

    &.all {
        margin-right: 8px;
        border-radius: 30px;

        .text {
            margin-left: 6px;
            width: 25px;
            opacity: 1;
        }
    }

    img {
        width: 16px;
        height: 16px;
    }

    .text {
        font-family: PingFangSC-Medium, sans-serif;
        font-weight: 500;
        font-size: 12px;
        color: #e60044;
        display: inline-block;
        width: 0;
        overflow: hidden;
        transition: all 0.5s linear;
        white-space: nowrap;
        opacity: 0;
    }
}
</style>
